<template>
    <div class="article-list-wrapper">
        <div class="article-list">

            <div 
                class="article1"
                :class="{
                    article2: article.cover_imgs.length > 1,
                    article3: article.cover_imgs.length === 0
                }"
                v-for="article in articles" 
                :key="article.id"
            >
                <h1>{{ article.name }}</h1>

                <div class="img-list">
                    <img 
                        v-for="url, index in article.cover_imgs" 
                        :key="index" 
                        :src="url">
                </div>

                <div class="info">
                    <span>{{ article.user.name }}</span>
                    <span>{{ article.reviewCount }}评论</span>
                    <span>{{ article.update_time }}</span>
                </div>

                <div class="edit">
                    <el-button @click="$router.replace(`/publishArticle/${article.id}`)">修改</el-button>
                    
                    <el-popconfirm title="确定要删除吗?" @confirm="deleteItem(article.id)">
                        <template #reference>
                            <el-button >删除</el-button>
                        </template>
                    </el-popconfirm>
                </div>
            </div>

        </div>

        <!--分页器-->
        <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 20, 30, 40, 50, 100, 200]"
            :total="total" 
            background
            layout="total, sizes, prev, pager, next, jumper"
            style="justify-content: center;" 
            @size-change="articleByPage()"
            @current-change="articleByPage()"
            @prev-click="articleByPage()"
            @next-click="articleByPage()"
        />

    </div>
</template>

<script>
import { getArticleByPage, getArticleTotal, setArticle } from '@/api/article.js'

export default {
    name: 'articleList',
    components: {},
    data () {
        return {
            currentPage: 1,
            pageSize: 10,
            total: 200,
            articles: null
        }
    },
    methods: {

        //分页查询文章列表
        async articleByPage () {
            let result1 = await getArticleByPage(this.currentPage, this.pageSize)
            if (result1 instanceof Error) return ElMessage.error(result1.message)

            let result2 = await getArticleTotal()
            if (result2 instanceof Error) return ElMessage.error(result2.message)
            
            this.articles = result1
            this.total = result2.total
        },
        async deleteItem (id) {
            let result = await setArticle({ id }, 'DELETE')

            if (result instanceof Error) return ElMessage.error(result.message)
            ElMessage.success('删除文章成功')

            this.articleByPage ()
        }
    },

    mounted () {
        this.articleByPage ()
    }
}
</script>

<style lang="less" scoped>
.article-list-wrapper{
    padding: 10px 0 30px 0;

    .article-list{
        display: flex;
        align-items: center;
        flex-direction: column;
        row-gap: 40px;
        padding-bottom: 30px;
    }
    .article1{
        width: 500px;
        height: 120px;
        display: flex;
        position: relative;
        cursor: pointer;

        h1{
            flex: 1;
            font-size: 20px;
            font-weight: 500;
            line-height: 28px;
            padding-top: 5px;
        }
        h1:hover{
            color: #f04142;
        }

        .img-list{
            flex-grow: 0;
            flex-shrink: 0;
            justify-self: flex-end;
            height: 120px;
            width: 160px;
            border: 1px solid #f2f2f2;

            img{
                width: 100%;
                height: 100%;
                border-radius: 5px;
            }
        }

        .info{
            position: absolute;
            bottom: 0;

            span{
                font-size: 14px;
                color: #999;
                margin-right: 20px;
            }
            span:hover{
                opacity: .8;
            }
        }

        .edit{
            width: 160px;
            height: 100%;
            position: absolute;
            top: 0;
            right: -160px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .article2{
        display: block;
        height: auto;

        .img-list{
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 120px;
            margin-top: 10px;

            img{
                width: 160px;
                height: 120px;
            }
        }

        .info{
            position: inherit;
            margin-top: 15px;
        }
    }

    .article3{
        display: block;
        height: auto;
        h1{
            padding-bottom: 40px;
        }
        .img-list{
            height: auto;
            border: none;
        }
    }
}
</style>